<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 单向数据绑定 -->
      <div><input type="text" :value="product" /></div>
      <div>单向数据绑定 product ：{{ product }}</div>
      <!-- 双向数据绑定 -->
      <div><input type="text" v-model="username" /></div>
      <div>双向数据绑定 username ：{{ username }}</div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          const product = ref("apple");
          const username = ref("编程段子");
          return {
            product,
            username,
          };
        },
      });

      app.mount("#app");
      /*
      MVVM模型
        M：模型(Model) ：响应式数据，比如 Ref 对象
        V：视图(View) ：模板代码
        VM：视图模型(ViewModel)：Vue 应用实例，比如 app 实例对象
      */
    </script>
  </body>
</html>
